<template>
  <div>
    <div class="headtitle">我的订单</div>
    <div>
      <el-popover
        placement="top-start"
        title="提示"
        width="200"
        trigger="hover"
        content="商家模式是指订单只显示销售订单。"
      >
        <el-button
          size="mini"
          slot="reference"
          :type="findByPage.model == 'Consumers' ? 'primary' : 'text'"
          @click="findByPage.model = 'Consumers'"
          >消费者模式</el-button
        >
      </el-popover>
      &nbsp;
      <el-popover
        placement="top-start"
        title="提示"
        width="200"
        trigger="hover"
        content="消费者模式是指订单只显示购买订单。"
      >
        <el-button
          size="mini"
          slot="reference"
          :type="findByPage.model == 'merchants' ? 'primary' : 'text'"
          @click="findByPage.model = 'merchants'"
          >商家模式</el-button
        >
      </el-popover>
    </div>
    <div class="main">
      <conSelect></conSelect>
      <div class="orders">
        <div class="title">
          <template v-for="(item, index) in orderStatus">
            <i
              :class="['lable', selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              v-if="item.code != 'more'"
              >{{ item.lable }}</i
            >
            <select
              :class="[selected == index ? 'active' : '']"
              @click="clickStatus(index)"
              placeholder="其他"
              v-else-if="item.code == 'more'"
              class="lable"
            >
              <option
                v-for="ite in item.more"
                :value="ite.code"
                :label="ite.lable"
                :key="ite.lable"
              ></option>
            </select>
          </template>
        </div>
        <filters :pHSearchInfo="HSearchInfo" :pHSList="HSList"></filters>
        <div class="orderLists">
          <div class="head rb">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="findByPage.pageNum"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="findByPage.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          <orderTable
            :orderList="orderList"
            :model="findByPage.model"
          ></orderTable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 0,
      more: "其他",
      allselect: false,
      findByPage: {
        userId: "",
        pageNum: 1,
        pageSize: 5,
        model: "Consumers", //模式： 消费者 Consumers, 商家 merchants
      },
      total: 0,
      orderStatus: [
        {
          lable: "全部",
          value: "all",
          code: "",
          selected: false,
        },
        {
          lable: "交易中",
          value: "doing",
          code: "",
          selected: false,
        },
        {
          lable: "待付款",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "商家待确认",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "待收货",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "待确认收货",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "待评论",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "退货/退款中",
          value: "",
          code: "",
          selected: false,
        },
        {
          lable: "其他",
          value: "",
          code: "more",
          selected: false,
          more: [
            {
              lable: "已完成",
              value: "finished",
              code: "",
            },
            {
              lable: "已退货/退款",
              value: "",
              code: "",
            },
            {
              lable: "我已取消",
              value: "",
              code: "",
            },
            {
              lable: "商家取消",
              value: "",
              code: "",
            },
          ],
        },
      ],
      HSList: [
        {
          name: "订单号",
          type: "input",
          vm: "orderNumber",
        },
        {
          name: "书名",
          type: "input",
          vm: "bookName",
        },
        {
          name: "店铺/发布者",
          type: "input",
          vm: " issuer",
        },
        {
          name: "价格",
          type: "twoinput",
          vm: ["Hprice", "Lprice"],
        },
      ],
      HSearchInfo: {
        orderNumber: "",
        bookName: "",
        issuer: "",
        Hprice: "",
        Lprice: "",
      },
      orderList: [],
    };
  },
  watch: {
    "findByPage.model": {
      handler(news) {
        console.log("model修改为", news);
        this.findAll();
      },
    },
  },
  components: {
    conSelect: () => import("@/components/util/conSelect.vue"),
    filters: () => import("@/components/util/filters.vue"),
    myTable1: () => import("@/components/util/myTable1.vue"),
    orderTable: () => import("@/components/util/orderTable.vue"),
  },
  created() {
    this.findByPage.userId = this.$store.state.user.user.userId;
  },
  mounted() {
    this.findAll();
  },
  methods: {
    clickStatus(index) {
      this.selected = index;
    },
    findAll() {
      console.log("findAll");
      this.$axios
        .post("sys/bookOrder/getOrderListByPageUserId", this.findByPage)
        .then(({ data }) => {
          console.log("getOrderListByPageUserId", data);
          this.orderList = data.orderList;
          this.total = data.total;
        });
    },
    handleSizeChange(val) {
      this.findByPage.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.findByPage.pageNum = val;
      this.findAll();
    },
  },
};
</script>

<style lang="less" scoped>
.headtitle {
  font-size: 24px;
  font-family: "font6";
  margin-bottom: 20px;
  margin-top: 10px;
}
.main {
  .orders {
    margin-top: 20px;
    .title {
      font-size: 12px;
      border-bottom: 2px solid rgb(181, 215, 227);
      .lable {
        z-index: 99;
        padding: 6px 10px;
        margin-right: 10px;
        background: linear-gradient(rgb(255, 255, 255), rgb(157, 203, 236));
      }
      .active {
        font-size: 16px;
        background: linear-gradient(rgb(157, 203, 236), rgb(255, 255, 255));
      }
      .lable:hover {
        .active;
      }
    }
  }
  .orderLists {
    margin: 0 auto;
    .head {
      line-height: 2;
      margin-right: 10px;
      margin-left: 10px;
      padding: 4px 10px;
      background: rgb(242, 239, 239);
      .right {
        padding-top: 4px;
        .num {
          margin-right: 10px;
          font-size: 10px;
        }
        .borders {
          height: 24px;
          line-height: 20px;
          text-align: center;
          display: inline;
          padding-left: 4px;
          padding-right: 4px;
          border: 1px solid lightgrey;
        }
      }
    }
  }
}
</style>